<template>
    <div class="strokeDefault">
        <div class="selectList">
          <ul>
            <li class="new-li">
              <button type="button" class="searchBtn" @click="addStroke">+&nbsp;&nbsp;新建</button>
            </li>
          </ul>
            <ul class="fr r-ul">
                <li>
                    <label for="bill">行程编号：</label>
                    <input type="text" id="bill" v-model="Numbers">
                </li>
                <li>
                    <label for="strokeStatus">行程状态：</label>
                    <select name="strokeStatus" id="strokeStatus" class="select" @change="colorChange($event)" v-model="Status">
                        <option v-for="(item,index) in StatusList" :value="item.value">{{item.text}}</option>
                    </select>
                </li>
                <li>
                    <label for="">出发日期：</label>
                    <input class="ipt-datepicker" type="text" id="startDate" placeholder="起始时间" name="startDate" v-model="start"><span class="dataFrom"> — </span><input class="ipt-datepicker" type="text" id="endDate" placeholder="结束时间" name="endDate" v-model="end">
                </li>
                <li>
                    <button class="searchBtn" type="button" @click="inquire()">查询</button>
                </li>
            </ul>
          <div class="operate-cont">
            <a class="oper-btn" href="javascript:;" ref="text" @click="closeStroke(task)">
              <span class="edit-icon close-icon"></span>
              <span>关闭行程</span>
            </a>
            <a class="oper-btn" href="javascript:;" ref="text" @click="addMember(task)">
              <span class="edit-icon eye-icon"></span>
              <span>成员查看</span>
            </a>
            <a class="oper-btn" href="javascript:;" ref="text" @click="addMap(task)">
              <span class="edit-icon locate-icon"></span>
              <span>位置查看</span>
            </a>
            <a class="oper-btn" href="javascript:;" ref="text" @click="addAnnouce(task)">
              <span class="edit-icon notice-icon"></span>
              <span>紧急通知</span>
            </a>
            <a class="oper-btn" href="javascript:;" ref="text" @click="setOfNow(task)">
              <span class="edit-icon go-icon"></span>
              <span>现在出发</span>
            </a>
            <a class="oper-btn" href="javascript:;" ref="text" @click="returnSure(task)">
              <span class="edit-icon back-icon"></span>
              <span>返程确认</span>
            </a>
          </div>
        </div>
      <div class="datas-box" v-show="listBox">
        <div class="left-cont">
          <table class="table table-bordered table-hover" id="exportTable" v-show="listBox">
            <thead>
            <tr class="active">
              <th>行程编号</th>
              <th>行程名称</th>
              <th>出发地-目的地</th>
              <th>导游电话</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(val,index) in baseList" @click="getTask(val)">
              <td><span>{{val.xchSn || '未设置'}}</span></td>
              <td>
                <span>{{val.title || '未设置'}}</span>
              </td>
              <td><span>{{val.startCity || '未设置'}} - {{val.destiCity || '未设置'}}</span></td>
              <td><span>{{val.managePhone || '未设置'}}</span></td>
            </tr>
            </tbody>
          </table>
          <FootPage :Pieces="pieces" :PiecePage="pageNum" :Page="pages" v-on:current-page="currentPage"></FootPage>
        </div>
        <div class="detail-box" v-show="strokeInfos">
          <div class="detail-head">详细信息</div>
          <div class="detal-content">
            <div>行程编号：{{strokeInfos.xchSn || '未设置'}}</div>
            <div>行程名称：{{strokeInfos.title || '未设置'}}</div>
            <div>起止日期：{{timeFormat(strokeInfos.startDate)}} 至 {{strokeInfos.finishDate ? strokeInfos.finishDate.substr(0,10) : '未设置'}}</div>
            <div>出发地区-目的地区：{{strokeInfos.startCity || '未设置'}} 至 {{strokeInfos.destiCity || '未设置'}}</div>
            <div>行程人数：{{strokeInfos.coTourist || '0'}}人</div>
            <div>导游电话：{{strokeInfos.managePhone || '未设置'}}</div>
            <div>行程状态：{{ListTripStatus[strokeInfos.tripStatus]}}</div>
            <div>备注：{{strokeInfos.demo || '未设置'}}</div>
          </div>
        </div>
      </div>
        <div class="NoData" v-show="NoData">
            对不起，没有数据
        </div>
    </div>
</template>
<script>
    import FootPage from '@/components/public/footpage'
    export default {
        data(){
            return{
              NoData:false, // 没有数据的时候的模块 默认隐藏
              listBox:true, // 数据列表模块 默认显示
              Http:'',// 数据接口连接
              BaseStatusHttp:'',// 更新行程状态连接
              // 禁止查询频繁操作
              trigger:true,
              triggerTime:'',
              // 子组件FootPage向父组件传值  页数跳转，数据渲染
              // 父组件向子组件FootPage传值  每一页多少条=》也可以直接在子组件内设置
              pieces:'',//数据总数
              pageNum:'',//每页数据条数
              pages:'1',//当前页码
              SubNav:'', //二级导航
              Numbers:'', //行程编号
              managePhone:'',//管理员电话
              start:'', //开始时间
              end:'', //结束时间
              startDate:'', //开始时间戳
              endDate:'', //结束时间戳
              searWord:'', //搜索标题
              Status:'', //状态
              StatusList:[//状态下拉列表
                {text:'待确认',value:1},
                {text:'代付款',value:2},
                {text:'待分配',value:4},
                {text:'待出发',value:5},
                {text:'进行中',value:6},
                {text:'待评价',value:7},
                {text:'全部',value:''}
              ],
              ListTripStatus:['未提交','待确认','待支付(订金)','待支付(全款)','已付款','待出发','进行中','已完成','已评价','已关闭'], //表单的订单状态
              baseList:'',// 列表数据
              task: {},
              strokeInfos: {}
            }
        },
        props:['subNav'],
        watch:{
            subNav: function(val) { // 二级导航数据
              if(val==' '){
                val='';
              }
              this.SubNav = val;
              this.Numbers=this.managePhone=this.start=this.end=this.startDate=this.endDate=this.searWord=this.Status='';
              this.pagination(window.location.href,1)
              this.pages=this.paginations(1);
              this.port(); //获取对应的二级导航数据
            }
        },
        computed:{
            NEW_STROKE_TAB() {
                return this.$store.state.stroke.NEW_STROKE_TAB;
            },
            BaseList(){
                return this.$store.state.interface.xchBaseList;
            },
            BaseStatus(){
                return this.$store.state.interface.xchBaseStatus;
            }
        },
        methods:{
            getTask (val) {
              this.task = val;
              this.strokeInfos = val;
            },
            colorChange(event){//下拉框在值该改变之后 改变颜色
              event.target.style.color = '#7f889c';
            },
            addStroke(){//新建行程
              this.$store.commit('NEW_STROKE_TAB',{
                title:'新建行程',
                components:'StrokeProNew'
              });
            },
            inquire(){//查询
              let self = this;
              if(self.trigger){
                self.trigger = false;
                self.pagination(window.location.href,1)
                self.pages = self.paginations(1);
                if(self.start === ''){
                  self.startDate = '';
                }
                if(self.end === ''){
                  self.endDate = '';
                }
                self.port(); //获取对应的数据
                self.triggerTime = setTimeout(function(){
                  self.trigger = true;
                },1500)
              }
            },
            timeFormat(timeStamp){
              //timeStamp是整数，否则要parseInt转换
              if (timeStamp) {
                let time = new Date(parseInt(timeStamp));
                let y = time.getFullYear();
                let m = (time.getMonth()+1)<10 ? ('0'+(time.getMonth()+1)):(time.getMonth()+1);
                let d = time.getDate()<10?('0'+time.getDate()):time.getDate();
                return `${y}${m}${d}`;
              } else {
                return '未设置'
              }
            },

            changeState(state,val){
                let self = this;
                self.$ajax.post(`${self.BaseStatusHttp}&xid=${val.xid}&current=${val.tripStatus}&next=${state}`).then(function(res){
                  let code = res.data.code;
                  if(code === '10000'){
                    layer.msg('更改状态成功');
                    self.$nextTick(() => {
                      self.port(); //获取对应页码数据
                      self.$router.go(0);
                    })
                  }else if(code === '14016'){
                    layer.msg('你不是该行程管理员，没有操作权限！');
                  }else if(code === '14014'){
                    layer.msg('找不到对应的行程！');
                  }else if(code === '11111'){
                    layer.msg('该订单还没有到出发日期！');
                  }else if(code === '14001'){
                    layer.msg('参数错误，请联系位讯客服人员');
                  }else if(code === '11112'){
                    layer.msg('该行程尚未结束，不允许操作。');
                  }else if(code === '11114'){
                    layer.msg('权限错误，请联系供应商。');
                  }else if(code === '11113'){
                    layer.msg('该行程已超过退款期限，不允许操作。');
                  }else if(code === '12000'){
                    layer.msg('退款参数错误，请联系位讯客服人员。');
                  }else if(code === '14005'){
                    layer.msg('找不到订单。');
                  }else if(code === '14006'){
                    layer.msg('状态不同步，请联系位讯客服人员。');
                  }else if(code === '14011'){
                    layer.msg('找不到账单，请联系位讯客服人员。');
                  }else if(code === '14012'){
                    layer.msg('支付参数错误。');
                  }else{
                    self.codes(code);
                    layer.msg('更改状态失败');
                  }
                },function(res){
                  layer.msg('更改状态失败');
                })
            },

            // 更改状态确认操作
            changeStatusConfirm (val, status, confirmText) {
              let self = this;
              if (val.xid) {
                layer.confirm(confirmText, {
                  btn: ['确定','取消'] //按钮
                }, function(){
                  layer.closeAll();
                  self.changeState(status, val);
                }, function(){
                  layer.closeAll();
                });
              } else {
                layer.msg('请选择行程！');
              }
            },
            openNewPage (data, newTab, title, component, dataSn) {
              if (data.xid) {
                this.$store.commit(newTab,{
                  title:title,
                  components:component,
                  dataId:data.xid,// ID
                  dataSn:dataSn,
                });
              } else {
                layer.msg('请选择行程！');
              }
            },
            closeStroke (val) {//关闭行程
              let self = this;
              self.changeStatusConfirm(val, 9, '是否关闭行程？');
            },
            addMember (data) {//成员名单
              this.openNewPage(data, 'NEW_STROKE_TAB', '成员查看', 'StrokeProMembers', data.xchSn);
            },
            addMap(data){
              this.openNewPage(data, 'NEW_STROKE_TAB', '位置查看', 'StrokeProMap', data.xchSn);
            },
            addAnnouce(data){//公告通知
              this.openNewPage(data, 'NEW_STROKE_TAB', '紧急通知', 'strokeProNoticeAnnounce', data.msg);
            },
            setOfNow (val) {//现在出发
              let self = this;
              self.changeStatusConfirm(val, 6, '是否现在出发？');
            },
            editStroke (task) {
              this.openNewPage(task, 'NEW_STROKE_TAB', '编辑行程', 'StrokeProEdit', task.xchSn);
            },
            returnSure (val) {//返回确认
              let self = this;
              self.changeStatusConfirm(val, 7, '是否返程？');
            },
            currentPage: function(msg){
                this.pages = msg;
                if(this.SubNav =='' & this.Numbers=='' & this.managePhone=='' & this.startDate=='' & this.endDate=='' & this.searWord=='' & this.Status==''){
                    this.pagination(window.location.href,msg);
                    this.pages=this.paginations(this.pages);
                }
                this.port(); //获取对应页码数据
            },
            // 获取数据函数port()
            port(){
              let self = this;
              layer.load(2);
              let formData = new FormData();
              formData.append('pageId', self.pages);
              formData.append('size', self.pageNum);
              formData.append('mtype', self.SubNav);
              formData.append('startTime', self.startDate);
              formData.append('endTime', self.endDate);
              formData.append('tripStatus', self.Status);
              formData.append('managePhone', self.managePhone);
              formData.append('xchSn', self.Numbers);
              formData.append('title', self.searWord);
              self.$ajax.post(self.Http,formData).then(function(res){
                layer.closeAll('loading');
                let code = res.data.code;
                if(code === '10000'){
                  self.NoData= false;
                  self.listBox= true;
                  let ShowList= res.data.result;
                  for(let i in ShowList){
                    self.baseList = ShowList[i];
                    self.strokeInfos = self.baseList[0];
                  }
                  self.pieces=res.data.amount;
                } else{
                  // 没有数据或者数据错误
                  self.NoData=true;
                  self.listBox=false;
                  self.pieces=0;
                  self.codes(code);
                }

                self.$nextTick(() => {
                  $('#exportTable tr').each(function () {
                    $(this).on('click', function () {
                      $(this).addClass('click-active');
                      $(this).siblings().removeClass('click-active');
                    })
                  });
                });
              },function(res){
                layer.closeAll('loading');
                self.pieces=0;
                layer.msg('服务器错误！');
              })
            },
        },
        beforeMount(){
            let url = this.BaseList;
            let sessionId = JSON.parse(sessionStorage.getItem('customer')).sid;
            this.Http = `${url}?sid=${sessionId}`; //
            this.BaseStatusHttp = `${this.BaseStatus}?sid=${sessionId}`; //状态修改
            this.pageNum = this.$store.state.pageNum;
            // 页码
            this.pages=this.paginations(this.pages);
            // 调用获取数据函数port()
            this.port();
        },
        mounted(){
            let self = this;
            // 起始时间
            $("#startDate").datepicker({
              showAnim: 'fadeIn',
              minDate: '-1y',
              maxDate: '+1y',
              defaultDate : -7,
              duration : 'fast',
              firstDay : 1 ,
              nextText : '下一月',
              prevText : '上一月',
              showButtonPanel: true,
              currentText : '今天',
              gotoCurrent : false,
              onSelect: function (dateText, inst) {
                $("#startDate").datepicker("option","minDate",dateText);
                self.start = dateText;
                self.startDate= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay)/1000;
              }
            });
            // 结束时间
            $("#endDate").datepicker({
              showAnim: 'fadeIn',
              minDate: '-1y',
              maxDate: '+1y',
              defaultDate : -7,
              duration : 'fast',
              firstDay : 1 ,
              nextText : '下一月',
              prevText : '上一月',
              showButtonPanel: true,
              currentText : '今天',
              gotoCurrent : false,
              onSelect:function(dateText,inst){
                $("#endDate").datepicker("option","maxDate",dateText);
                self.end = dateText;
                self.endDate= Date.UTC(inst.currentYear, inst.currentMonth, inst.currentDay)/1000;
              }
            });
        },
        components:{
          FootPage,
        }
    }
</script>
<style lang="scss" scoped>
  .datas-box{
    display:box; /*（伸缩盒最老版本） */
    display:-webkit-box;  /* iOS 6-, Safari 3.1-6 */
    display:-webkit-flex; /* Chrome */
    display:-moz-box;     /* Firefox 19 */
    display:-ms-flexbox;
    display:flex;  /*flex容器*/
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    background: #fff;
    border: 1px solid #ddd;
  }
    /*表格*/
    .table-bordered{
        table-layout: fixed;
        tr td:nth-child(1){
            span{
                word-wrap: break-word;
                word-break: normal;
                display: block;
            }
        }
        tr td:nth-child(2) span{
            color: #09ba79;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        tr td:nth-child(2) span.active{
            color: #7f889c;
        }
        tr td:nth-child(3) span{
            display:block;
            white-space: nowrap;
        }
        tr td:nth-last-child(1) span{
            color: #09ba79;
            white-space: nowrap;
            line-height:2;
        }

    }
  tr.click-active{background: #f5f5f5;}
  .left-cont{width: 76%;margin: 10px;}
  .detail-box{
    width: 24%;background: #fff;
    border-left: 1px solid #ddd;
    overflow-y: auto;
  }
  .detal-content{padding: 10px 14px;}
  .detal-content div{padding-bottom: 14px;}
  .detail-head{
    background: #09ba79;color: #fff;
    padding: 0 14px;line-height: 33px;font-size: 14px;
  }
  .operate-cont{clear:both;float: right;margin-right: 20px;}
  .oper-btn{float: left;margin:4px 18px 4px 0;color: #09ba79;}
  .oper-btn:last-child{margin-right: 0;}
  .edit-icon{
    float: left;
    width: 14px;height: 14px;margin-right: 4px;margin-top: 2px;
    background: url("../../assets/images/edit_icon.png") no-repeat;background-size: 100% 100%;
  }
  .back-icon{
    width: 14px;height: 14px;
    background: url("../../assets/images/back_icon.png") no-repeat;background-size: 100% 100%;margin-top: 2px;
  }
  .go-icon{
    width: 10px;height: 14px;margin-top: 2px;
    background: url("../../assets/images/go_icon.png") no-repeat;background-size: 100% 100%;
  }
  .notice-icon{
    width: 14px;height: 12px;margin-top: 3px;
    background: url("../../assets/images/notice_icon.png") no-repeat;
    background-size: 100% 100%;
  }
  .locate-icon{
    width: 14px;height: 14px;margin-top: 2px;
    background: url("../../assets/images/locate_icon.png") no-repeat;
    background-size: 100% 100%;
  }
  .eye-icon{
    width: 16px;height: 12px;margin-top: 3px;
    background: url("../../assets/images/eye_icon.png") no-repeat;background-size: 100% 100%;
  }
  .close-icon{
    width: 14px;height: 14px;margin-top: 2px;
    background: url("../../assets/images/close_icon.png") no-repeat;background-size: 100% 100%;
  }
  ul.r-ul{margin-right: 20px;}
</style>
